<template>
    <div>
        <el-table :data="pagedData" style="width: 100%" border>
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="age" label="年龄" width="80" />
        </el-table>

        <div style="margin-top: 20px; text-align: right;">
            <el-config-provider :locale="zhCn">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="data.length"
                    :page-size="pageSize" :current-page="currentPage" :page-sizes="[5, 10, 20, 50]"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </el-config-provider>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElPagination } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' // 中文语言包



// 模拟数据
const data = ref([
    { id: 1, name: '张三', email: 'zhangsan@example.com', age: 28 },
    { id: 2, name: '李四', email: 'lisi@example.com', age: 32 },
    { id: 3, name: '王五', email: 'wangwu@example.com', age: 24 },
    { id: 4, name: '赵六', email: 'zhaoliu@example.com', age: 29 },
    { id: 5, name: '钱七', email: 'qianqi@example.com', age: 31 },
    { id: 6, name: '孙八', email: 'sunba@example.com', age: 27 },
    { id: 7, name: '周九', email: 'zhoujiu@example.com', age: 26 },
    { id: 8, name: '吴十', email: 'wushi@example.com', age: 30 },
    { id: 9, name: '郑十一', email: 'zhengshiyi@example.com', age: 33 },
    { id: 10, name: '王十二', email: 'wangshier@example.com', age: 25 },
    { id: 11, name: '冯十三', email: 'fengshisan@example.com', age: 28 },
    { id: 12, name: '陈十四', email: 'chenshisi@example.com', age: 29 },
])

const currentPage = ref(1)
const pageSize = ref(5)

// 计算当前页数据
const pagedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    return data.value.slice(start, start + pageSize.value)
})

// 页码改变
const handleCurrentChange = (page: number) => {
    currentPage.value = page
}

// 每页条数改变
const handleSizeChange = (size: number) => {
    pageSize.value = size
    currentPage.value = 1 // 切换每页条数时回到第一页
}
</script>
